<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="jss-table">
      <!-- 查询过滤 -->
      <tableFilter
        v-bind="$attrs"
        v-on="$listeners"
        :tableOptions="tableOptions"
        @handleSearch="handleSearch"
      ></tableFilter>

      <!-- 表格操作 -->
      <tabletoolbar
        ref="tabletoolbar"
        v-bind="$attrs"
        v-on="$listeners"
        :cols="tableOptions.cols"
        @handleSetView="handleSetView"
      >
        <slot></slot>
      </tabletoolbar>

      <!-- 表格 -->
      <el-table
        ref="eltable"
        v-loading="loading"
        element-loading-text="拼命加载中"
        :height="tableOptions.height || 600"
        :max-height="tableOptions.tableMaxHeight || 700"
        :data="tableData"
        width="100%"
        :header-cell-style="
          tableOptions.tableHeaderStyle || { background: '#eee' }
        "
        @selection-change="handleSelectionChange"
        :border="tableOptions.tableBorder || false"
        :size="tableOptions.tableSize || 'mini'"
        @sort-change="handleSortChange"
        @row-click="handleSelectRadio"
      >
        <!-- 单选 -->
        <el-table-column
          label=""
          width="65"
          fixed="left"
          v-if="tableOptions.radioSelect"
        >
          <template slot-scope="scope">
            <el-radio
              class="radio"
              v-model="templateSelection"
              :label="scope.$index"
              >&nbsp;</el-radio
            >
          </template>
        </el-table-column>
        <!-- 多选 -->
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
          v-if="tableOptions.selection"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in tableOptions.cols"
          :render-header="item.render"
          :key="index"
          :prop="item.props"
          :label="item.label"
          :width="item.width"
          :align="item.align || 'center'"
          :filters="item.filters ? item.filters : null"
          :filter-method="item.filterHandler"
          :filter-multiple="false"
          :show-overflow-tooltip="item.showTool || true"
          :sortable="item.sortable || false"
          :fixed="item.fixed || false"
          :min-width="item.minWidth || 100"
          v-if="item.showInTable"
        >
          <template slot-scope="scope">
            <!-- 普通字段 -->
            <span v-if="!item.html">
              <span
                @click="
                  handleTableBtn(item.handleName, scope.row, scope.$index)
                "
                >{{ scope.row[item.props] }}</span
              >
            </span>
            <!-- 自定义组件  -->
            <span v-else-if="item.compName">
              <span class="tabel_edit_cell">
                <component
                  :is="item.compName"
                  :row="scope.row"
                  :defaultVal="scope.row[item.props]"
                  @handleChange="handleChangeCellSecelt"
                ></component>
              </span>
            </span>
            <!-- html -->
            <span v-else-if="item.html">
              <span
                v-html="item.html(scope.row)"
                @click="
                  handleTableBtn(item.handleName, scope.row, scope.$index)
                "
                :class="{ cursor: item.cursor }"
              ></span>
            </span>
            <!-- render 暂未开发 -->
            <span v-else-if="item.render"> </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          :align="tableOptions.handleAlign || 'left'"
          :width="tableOptions.finalColWidth || 250"
          v-if="tableOptions.handle && tableOptions.handle.length"
          :fixed="tableOptions.tableFixed || false"
        >
          <template slot-scope="scope">
            <i
              v-for="(item, index) in tableOptions.handle"
              :key="index"
              v-if="
                (!item.show || (item.show && item.show(scope.row))) &&
                !item.btntxt
              "
              :title="item.txt"
              :class="'iconfont' + ' ' + item.icon"
              @click="handleTableBtn(item.handleName, scope.row, scope.$index)"
            ></i>
            <span
              class="jsstbale_btntxt"
              v-for="(item, index) in tableOptions.handle"
              :key="index"
              v-if="
                (!item.show || (item.show && item.show(scope.row))) &&
                item.btntxt
              "
              @click="handleTableBtn(item.handleName, scope.row, scope.$index)"
              >{{ item.txt }}</span
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-if="tableOptions.isShowPaination || true"
        background
        :total="total"
        style="margin-top: 20px"
        layout="sizes, prev, pager, next"
        :page-sizes="[10, 20, 30, 50]"
        @current-change="handleChangePage"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ["tableOptions"],
  data() {
    return {
      loading: false,
      tableData: [], //数据源
      templateSelection: "", //多选
      tableIndex: 1, //表格序号
      total: 0, //总数
      isShowMore: false, //是否展开
      form: {}, //外部查询参数
      // 查询参数 固定分页
      queryparams: {
        pageIndex: 1,
        pageSize: 20,
        userId: 0,
      },
    };
  },
  computed: {
    // 表单查询计算
    searcFromList() {
      return this.tableOptions.cols.filter((el) => el.showInSerach);
    },
  },
 
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const tabeleParams = Object.assign(this.queryparams, this.form);
      if (this.tableOptions.apiFn) {
        this.loading = true;
        this.tableOptions
          .apiFn(tabeleParams)
          .then((res) => {
            this.loading = false;
            if (!res.status) {
              this.tableData = res.content;
              this.total = res.total;
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      }
    },
    // 查询
    handleSearch(params) {
      this.form = params;
      console.log(this.queryparams, "查询参数queryparams");
      console.log(this.form, "查询参数form");
      this.queryparams.pageIndex = 1;
      this.initData();
    },
    // 重置
    handleRest() {
      // for (var _key in this.$refs) {
      //   if (this.$refs[_key] && this.$refs[_key][0]) {
      //     console.log(_key);
      //     this.$refs[_key][0].clear();
      //   }
      // }
      // for (var _key in this.form) {
      //   this.form[_key] = null;
      // }
    },
    // 分页
    handleChangePage(v) {
      this.queryparams.pageIndex = v;
      this.initData();
    },
    handleSizeChange(v) {
      this.queryparams.pageSize = v;
      this.initData();
    },
    // 表头搜索事件监听字段
    handleChange(val, params) {
      console.log(val, params, "参数值");
      this.queryparams[params] = val;
    },
    // 单元格选择事件
    handleChangeCellSecelt(v, a, row) {
      console.log(v, row);
    },
    // 事件
    handleTableBtn(name, row, index) {
      this.$emit("handleTableBtn", name, row, index);
    },
    // 多选
    handleSelectionChange(val) {
      if (val && val.length) {
        this.$refs.tabletoolbar.disabled = false;
      } else {
        this.$refs.tabletoolbar.disabled = true;
      }
      this.$emit("handleSelectionChange", val);
    },
    // 单选
    handleSelectRadio(val) {
      if (val) this.$refs.tabletoolbar.disabled = false;
      this.$emit("handleSelectRadio", val);
    },
    //排序事件
    handleSortChange(a) {
      // 降序
      if (a.order == "descending") {
        this.$emit("handleTabelSort", a.prop, a.order);
      } else {
        this.$emit("handleTabelSort", a.prop, a.order);
      }
    },
    // 试图
    handleSetView(val) {
      this.tableData = [];
      this.tableOptions.cols.forEach((el) => {
        val.forEach((item) => {
          if (item.label == el.label) {
            el.showInTable = item.showInTable;
          }
        });
      });
      this.handleSearch();
      this.$refs.doLayout;
      // this.$forceUpdate();
    },
  },
};
</script>






<style  scoped>
.jss-table >>> .el-progress-bar .el-progress-bar__outer {
  height: 15px;
  border-radius: 0px;
}
.jss-table >>> .el-progress-bar .el-progress-bar__inner {
  border-radius: 0px;
}

.jss-table >>> .el-table td div {
  display: block;
}
.jsstbale_btntxt {
  cursor: pointer;
  text-decoration: underline;
  margin: 0 2px;
}
.jss-table .iconfont {
  cursor: pointer;
  display: inline-block;
  margin: 0 8px;
  font-size: 18px;
  color: rgb(255, 123, 0);
}
.cursor {
  cursor: pointer;
  color: #40b7ff;
  text-decoration: underline;
}
.nodata_container img {
  text-align: center;
  color: #999;
}
.jss-table >>> .el-table__fixed-right {
  right: 5px !important;
}
</style>
